<template>
	<view class="user_change">
		<Navbar>用户信息</Navbar>
		<scroll-view scroll-y class="scroll_view">
			<view class="content">
				<view class="item_view">
					<view class="title">
						<view>上级信息</view>
					</view>
					<view class="item">
						<text class="key">上级昵称:</text>
						<input type="text" placeholder="请输入昵称" disabled v-model="parent_name" class="input">
					</view>
					<view class="item">
						<text class="key">上级ID:</text>
						<input type="text" placeholder="请输入昵称" disabled v-model="parent_id" class="input value">
					</view>
				</view>
				<view class="item_view">
					<view class="title">
						<view>个人信息</view>
					</view>
					<view class="item">
						<text class="key">昵称:</text>
						<input type="text" placeholder="请输入昵称" v-model="nickname" class="input">
					</view>
					<view class="item">
						<text class="key">头像:</text>
						<view class="avatar_box" @click="clickUpload">
							<image :src="head_portrait" class="avatar"></image>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item">
						<text class="key">个人ID:</text>
						<input type="text" placeholder="请输入昵称" disabled v-model="user_id" class="input value">
					</view>
					<view class="btn" @click="submit">确认修改</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		upload,
		userEdit,
		userInfo
	} from '@/request/api.js';
	export default {
		data() {
			return {
				parent_name: "",
				parent_id: "",
				nickname: "",
				head_portrait: "",
				user_id: ""
			}
		},
		async onLoad() {
			let {
				user,
				parent
			} = await userInfo();
			this.parent_name = parent?.nickname ?? "无上级";
			this.parent_id = parent?.id ?? "无上级";

			this.nickname = user.nickname;
			this.head_portrait = user.head_portrait;
			this.user_id = user.id;
		},
		methods: {
			async clickUpload() {
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let {
							url
						} = await upload({
							name: "image",
							filePath: tempFilePaths[0]
						});
						this.head_portrait = url;
					}
				})
			},
			async submit() {
				await userEdit({
					nickname: this.nickname,
					head_portrait: this.head_portrait
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.$emit('close');
				}, 1000);
				let {
					user
				} = await userInfo();
				this.$store.commit('changeInfo', user);
			}
		}
	}
</script>

<style scoped lang="scss">
	.user_change {
		height: 100vh;
		background: #29170D;
		overflow: hidden;

		.scroll_view {
			height: calc(100vh - #{$navbarHeight});
			padding-top: 48rpx;
			box-sizing: border-box;

			.content {
				width: 100%;
				height: 1000rpx;
				padding: 40rpx 75rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/bg/750_800.png) no-repeat;
				background-size: 100% 100%;

				.item_view:last-child {
					height: 650rpx;
					padding-top: 100rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}

				.title {
					display: flex;
					justify-content: center;
					align-items: center;

					view {
						width: 256rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						color: #494338;
						font-size: 42rpx;
						font-weight: 400;
						font-family: LiSu;
						background: url(#{$baseImageUrl}/home/title.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.item {
					width: 100%;
					height: 120rpx;
					border-bottom: 1px solid rgba(73, 67, 56, .2);
					display: flex;
					justify-content: space-between;
					align-items: center;

					.key {
						color: #494338;
						font-size: 32rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					.input {
						flex: 1;
						text-align: right;
						border-radius: 10rpx;
						padding-left: 45rpx;
						box-sizing: border-box;

						&.value {
							color: #f00;
							font-weight: 700;
						}
					}

					.avatar_box {
						display: flex;
						align-items: center;

						.avatar {
							width: 100rpx;
							height: 100rpx;
							margin-right: 20rpx;
							border-radius: 50%;
						}
					}
				}

				.btn {
					width: 204rpx;
					height: 74rpx;
					line-height: 74rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: 400;
					font-family: SimSun;
					// margin-top: 100rpx;
					background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>